<template>
  <div class="about-page">
    <h1>饮食禁忌提醒</h1>
    
    <!-- 表格 -->
    <div class="taboo-table">
      <table>
        <thead>
          <tr>
            <th>食物</th>
            <th>禁忌类型</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in dietTaboos" :key="item.restriction_id">
            <td>{{ getFoodName(item.food_id) }}</td>
            <td>{{ item.reason }}</td>
            <td>
              <button @click="deleteTaboo(item.restriction_id)" class="nav-link-like">
                <i class="fa fa-trash mr-2"></i> 删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="dietTaboos.length === 0" class="text-center py-8 text-gray-500">
        <i class="fa fa-info-circle mr-2"></i> 暂无饮食禁忌记录
      </div>
    </div>
    
    <!-- 添加饮食禁忌表单 -->
    <div class="add-taboo-form mt-6 p-6 bg-white rounded-xl shadow-lg">
      <h3 class="text-xl font-semibold mb-6 text-center border-b-2 border-gray-200 pb-3">
        添加饮食禁忌
      </h3>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            食物名称
          </label>
          <select
            v-model="newTaboo.food_id"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">请选择食物</option>
            <option v-for="food in foodList" :value="food.food_id" :key="food.food_id">
              {{ food.name }}
            </option>
          </select>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            禁忌类型
          </label>
          <select
            v-model="newTaboo.reason"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">请选择</option>
            <option value="过敏">过敏</option>
            <option value="不耐受">不耐受</option>
            <option value="不喜欢">不喜欢</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>
      
      <button
        @click="addTaboo"
        class="mt-6 w-1/2 mx-auto flex justify-center items-center nav-link-like py-3 rounded-lg"
      >
        <i class="fa fa-plus mr-2"></i> 添加禁忌
      </button>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading text-center mt-4">
      <i class="fa fa-spinner fa-spin mr-2"></i> 加载中...
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/counter';

const userStore = useUserStore();
const dietTaboos = ref([]);
const foodList = ref([]);
const loading = ref(false);
const newTaboo = ref({
  food_id: null,
  reason: ''
});

// 获取食物列表
const fetchFoodList = async () => {
  try {
    const response = await axios.get('http://localhost:8080/MDMS0214_war/food/all');
    if (response.status === 200) {
      foodList.value = response.data;
      console.log('食物列表:', foodList.value);
    } else {
      console.error('获取食物列表失败:', response.status);
      alert('请稍后重试');
    }
  } catch (error) {
    console.error('食物列表请求失败:', error);
  }
};

// 获取饮食禁忌
const fetchDietTaboos = async () => {
  loading.value = true;
  try {
    const user_id = String(userStore.userId); 
    if (!user_id) {
      alert('请先登录');
      return;
    }
    const response = await axios.get('http://localhost:8080/MDMS0214_war/dietRestriction/all');
    if (response.status === 200) {
      dietTaboos.value = response.data.filter(item => item.user_id === user_id);
      console.log('用户禁忌列表:', dietTaboos.value);
    } else {
      console.error('获取禁忌失败:', response.status);
      alert('请稍后重试');
    }
  } catch (error) {
    console.error('禁忌请求失败:', error);
  } finally {
    loading.value = false;
  }
};

// 根据food_id获取食物名称
const getFoodName = (food_id) => {
  return foodList.value.find(food => String(food.food_id) === String(food_id))?.name || '未知食物';
};

// 添加饮食禁忌
const addTaboo = async () => {
  if (!newTaboo.value.food_id || !newTaboo.value.reason) {
    alert('请选择食物和禁忌类型');
    return;
  }

  try {
    const user_id = String(userStore.userId); 
    if (!user_id) {
      alert('请先登录');
      return;
    }
    const response = await axios.post(
      'http://localhost:8080/MDMS0214_war/dietRestriction/add',
      {
        user_id: user_id,
        food_id: String(newTaboo.value.food_id),
        reason: newTaboo.value.reason
      },
      { headers: { 'Content-Type': 'application/json' } }
    );
    
    if (response.status === 200) {
      alert('添加成功');
      fetchDietTaboos();
      newTaboo.value = { food_id: null, reason: '' };
    } else {
      alert('添加失败');
    }
  } catch (error) {
    console.error('添加失败:', error);
    alert('请稍后重试');
  }
};

// 删除饮食禁忌
const deleteTaboo = async (restriction_id) => {
  if (!window.confirm('确定要删除这条记录吗？')) return;
  
  try {
    const response = await axios.delete(
      `http://localhost:8080/MDMS0214_war/dietRestriction/${restriction_id}`
    );
    if (response.status === 200) {
      alert('删除成功');
      fetchDietTaboos();
    } else {
      alert('删除失败');
    }
  } catch (error) {
    console.error('删除失败:', error);
    alert('请稍后重试');
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await fetchFoodList();
  await fetchDietTaboos();
});
</script>

<style scoped>
/* 基础样式 */
.about-page {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.taboo-table {
    border-collapse: collapse;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.taboo-table th, 
.taboo-table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
}

h1 {
    text-shadow: 0 0 5px white;
    text-align: center;
    margin-bottom: 40px;
    font-size: 28px;
}

.loading {
    font-size: 18px;
}

/* 添加记录表单样式 */
.add-taboo-form {
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.add-taboo-form:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.add-taboo-form h3 {
    color: #2d3748;
    margin-bottom: 25px;
    font-size: 20px;
}

.add-taboo-form label {
    color: #4a5568;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.add-taboo-form input,
.add-taboo-form select {
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.add-taboo-form input:focus,
.add-taboo-form select:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.4);
    outline: none;
}

/* 按钮样式 */
.nav-link-like {
    background-color: #38b2ac;
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-link-like:hover {
    background-color: #2c7a7b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-link-like:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 响应式样式 */
@media (max-width: 768px) {
    .add-taboo-form {
        padding: 20px;
        max-width: 90%;
    }
    
    .add-taboo-form .grid-cols-1 md:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .nav-link-like {
        width: 100%;
    }
}
</style>